<template>
    <div class="box">
        <div class="selectBox1">
            <div class>
                <span style="width:1rem"></span>
                <el-tooltip class="item" effect="dark" content="新增" placement="left">
                    <el-button v-hasPermi="['basicDataSubsystem:oilPrice:oilPriceInsert']" size="mini" type="primary"
                        icon="el-icon-plus" @click="leixingAddModel()">新建</el-button>
                </el-tooltip>
            </div>
            <div>
                <el-form ref="paramform" size="mini" :model="searchForm" inline>
                    <el-form-item prop="customerName">
                        <el-input style="width: 150px;" v-model="searchForm.customerName" placeholder="客户名称"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" size="mini" @click="searchData()" icon="el-icon-search">查询</el-button>
                    </el-form-item>
                </el-form>
            </div>
        </div>
        <BaseTable :data="customerData" :columns="customerColumns" :tableHeight="tableHeight" :pagination="false"
            :loading="loading">
            <el-table-column fixed="right" align="center" label="操作" slot="operationColumn" width="150px">
                <template slot-scope="scope">
                    <el-button size="mini" title="编辑" v-hasPermi="['basicDataSubsystem:oilPrice:oilPriceUpdate']"
                        @click.stop="handleEdit(scope.$index, scope.row)"><span style="color:#0B6CD6"> <i
                                class='iconfont icon-1-07'></i>编辑</span></el-button>
                    <el-button size="mini" title="删除" v-hasPermi="['basicDataSubsystem:oilPrice:oilPriceDelete']"
                        @click.stop="handleDelete(scope.row.id)"><span style="color:#F75E5E"> <i
                                class='iconfont icon-1-08'></i>删除</span></el-button>
                </template>
            </el-table-column>
        </BaseTable>
        <div class="page">
            <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"
                :current-page="queryall.startpage" :page-sizes="[10, 15, 20, 25, 30]" :page-size="queryall.pagesize"
                layout="total, sizes, prev, pager, next, jumper" :total="queryall.totalNum"></el-pagination>
        </div>
        <!-- 新增下游客户 -->
        <el-drawer :before-close="handleClose" title="新增下游客户" :visible.sync="addleixingMod" direction="rtl" size="28%">
            <el-form ref="addTypeData" :rules="formRules" size="small" :model="form" style="padding:10px 20px">
                <el-form-item prop="customerName" label="客户名称" :label-width="formLabelWidth">
                    <el-input v-model="form.customerName"></el-input>
                </el-form-item>
                <el-form-item prop="customerShortName" label="客户简称" :label-width="formLabelWidth">
                    <el-input v-model="form.customerShortName"></el-input>
                </el-form-item>
                <el-form-item prop="parentCode" label="上级客户" :label-width="formLabelWidth">
                    <el-select style="width: 240px;" v-model="form.parentCode" clearable placeholder="请选择上级客户">
                        <el-option v-for="item in topCustomer" :key="item.customerCode" :label="item.customerName"
                            :value="item.customerCode">
                        </el-option>
                    </el-select>
                </el-form-item>
            </el-form>
            <div class="demo-drawer__footer">
                <el-button size="small" type="primary" @click="addList()">保 存</el-button>
            </div>
        </el-drawer>
        <!-- 编辑下游客户 -->
        <el-drawer :before-close="handleClose" title="修改下游客户" :visible.sync="editleixMod" size="28%">
            <el-form ref="editTypeData" :rules="formRules" :model="nowData" size="small" style="padding:10px 20px">
                <!-- <el-form-item prop="customerCode" label="客户代码" :label-width="formLabelWidth">
                    <el-input v-model="nowData.customerCode"></el-input>
                </el-form-item> -->
                <el-form-item prop="customerName" label="客户名称" :label-width="formLabelWidth">
                    <el-input v-model="nowData.customerName"></el-input>
                </el-form-item>
                <el-form-item prop="customerShortName" label="客户简称" :label-width="formLabelWidth">
                    <el-input v-model="nowData.customerShortName"></el-input>
                </el-form-item>
                <el-form-item prop="parentCode" label="上级客户" :label-width="formLabelWidth">
                    <el-select style="width: 100%;" v-model="nowData.parentCode" clearable placeholder="请选择上级客户">
                        <el-option v-for="item in topCustomer" :key="item.customerCode" :label="item.customerName"
                            :value="item.customerCode">
                        </el-option>
                    </el-select>
                </el-form-item>
            </el-form>
            <div class="demo-drawer__footer">
                <el-button size="small" type="primary" @click="editTypeList()">保 存</el-button>
            </div>
        </el-drawer>
    </div>
</template>
    
<script>
import Utils from '@/libs/Utils.js'
import BaseTable from '@/components/BaseTable'
import BaseForm from '@/pages/SystemPage/system/component/form.vue'
import dfilters from '@/libs/Utils.js'
export default {
    components: {
        BaseForm,
        BaseTable
    },
    data() {
        return {
            oldValA: {},
            oldValB: {},
            oldValC: {},
            oldValD: {},
            // 字典列表数据
            customerColumns: [
                {
                    prop: 'customerCode',
                    label: '客户代码'
                },
                {
                    prop: 'customerName',
                    label: '客户名称'
                },
                {
                    prop: 'customerShortName',
                    label: '客户简称'
                },
                {
                    prop: 'parentCode',
                    label: '上级客户代码'
                },
                {
                    prop: 'createTime',
                    label: '创建时间'
                },
            ],
            customerData: [],
            loading: false,
            searchForm: {
                customerName: ''
            }, // 查询类型
            // 查询
            form: {
                customerName: '',
                customerShortName: '',
                parentCode: ''
            },
            topCustomer: [],
            formRules: {
                month: [
                    { required: true, message: '月份不能为空' }
                ],
                oilPrice: [
                    { required: true, message: '单价不能为空' },
                ]
            },
            formLabelWidth: '80px', // form的item宽度
            editleixMod: false, // 修改弹出
            addleixingMod: false, // 新增
            nowData: {}, // 临时存放操作数据
            ref: '',
            // 分页
            queryall: {
                startpage: 1,
                pagesize: 15,
                totalNum: 0
            },
        }
    },
    computed: {
        tableHeight() {
            return this.$store.state.tableHeight
        },
    },
    activated() {
        this.getTopCustomer()
    },
    methods: {
        // 获取上游客户
        async getTopCustomer() {
            const res = await this.$http.get(
                `/${this.$ServiceName}/api/external/CustomerItemController/query`
            )
            if (res.data.success) {
                this.topCustomer = res.data.data
                console.log(this.topCustomer);
            } else {
                return false
            }
        },
        handleClose(done) {
            let oldV = {}
            let newV = {}
            if (this.addleixingMod) {
                oldV = this.oldValA
                newV = this.form
            }
            if (this.editleixMod) {
                oldV = this.oldValC
                newV = this.nowData
            }
            if (!Utils.compareData(oldV, newV)) {
                this.$confirm('修改的数据未保存，是否关闭？')
                    .then(_ => {
                        done()
                        const ref = this.ref // editTypeData  editDataRef addTypeData addForm
                        this.$nextTick(() => {
                            if (ref === 'editTypeData') {
                                if (this.$refs['editTypeData'] !== undefined) {
                                    this.$refs['editTypeData'].resetFields()
                                }
                            }
                            if (ref === 'editDataRef') {
                                if (this.$refs['editDataRef'] !== undefined) {
                                    this.$refs['editDataRef'].resetFields()
                                }
                            }
                            if (ref === 'addTypeData') {
                                if (this.$refs['addTypeData'] !== undefined) {
                                    this.$refs['addTypeData'].resetFields()
                                }
                            }
                            if (ref === 'addForm') {
                                if (this.$refs['addForm'] !== undefined) {
                                    this.$refs['addForm'].resetFields()
                                }
                            }
                        })
                    })
                    .catch(_ => { })
            } else {
                done()
                const ref = this.ref // editTypeData  editDataRef addTypeData addForm
                this.$nextTick(() => {
                    if (ref === 'editTypeData') {
                        if (this.$refs['editTypeData'] !== undefined) {
                            this.$refs['editTypeData'].resetFields()
                        }
                    }
                    if (ref === 'editDataRef') {
                        if (this.$refs['editDataRef'] !== undefined) {
                            this.$refs['editDataRef'].resetFields()
                        }
                    }
                    if (ref === 'addTypeData') {
                        if (this.$refs['addTypeData'] !== undefined) {
                            this.$refs['addTypeData'].resetFields()
                        }
                    }
                    if (ref === 'addForm') {
                        if (this.$refs['addForm'] !== undefined) {
                            this.$refs['addForm'].resetFields()
                        }
                    }
                })
            }
        },
        // 新增弹出框
        leixingAddModel() {
            this.ref = 'addTypeData'
            if (!this.addleixingMod) {
                this.addleixingMod = true
                this.form = this.$options.data().form;
            }

            this.oldValA = { month: '', oilPrice: '' }
            this.$nextTick(() => {
                this.$refs.addTypeData.resetFields()
            })
        },

        // 修改弹出
        async handleEdit(index, row) {
            this.ref = 'editTypeData'
            const res = await this.$http.get(
                `/${this.$ServiceName}/api/external/CustomerItemController/queryById?id=${row.id}`
            )
            if (res.data.success) {
                this.nowData = res.data.data
                this.nowData.month = dfilters.getProcessingDate(this.nowData.month, '3')
                this.oldValC = JSON.parse(JSON.stringify(this.nowData))
            } else {
                return false
            }

            if (!this.editleixMod) {
                this.editleixMod = true
            }
        },
        // 保存
        async editTypeList() {
            this.form.customerName = this.nowData.customerName
            this.form.parentCode = this.nowData.parentCode
            this.form.customerShortName = this.nowData.customerShortName
            this.form.id = this.nowData.id
            // editTypeData
            this.$refs['editTypeData'].validate(async valid => {
                if (valid) {
                    const res = await this.$http.put(
                        `/${this.$ServiceName}/api/external/CustomerItemController/update`,
                        this.form
                    )
                    if (res.status === 200) {
                        if (res.data.success) {
                            if (this.editleixMod) {
                                this.editleixMod = false
                            }
                            this.getData()
                            return this.$message.success(res.data.msg)
                        }
                        return this.$message.warning(res.data.msg)
                    }
                    this.$message.error('获取数据失败！')
                } else {
                    return
                }
            })
        },
        // 新增
        addList() {
            this.$refs['addTypeData'].validate(async valid => {
                if (valid) {
                    const res = await this.$http.post(
                        `/${this.$ServiceName}/api/external/CustomerItemController/insert`,
                        this.form
                    )
                    if (res.status === 200) {
                        if (res.data.success) {
                            if (this.addleixingMod) {
                                this.addleixingMod = false
                            }
                            this.getData()
                            return this.$message.success(res.data.msg)
                        }
                        return this.$message.warning(res.data.msg)
                    }
                    this.$message.error('新增失败！')
                } else {
                    return false
                }
            })
        },
        // 删除数据
        async subDelete(id) {
            const res = await this.$http.delete(
                `/${this.$ServiceName}/api/external/CustomerItemController/delete?id=${id}`
            )
            if (res.data.code != '0000') {
                return this.$message.error(res.data.msg)
            }
            this.$message.success(res.data.msg)
            this.getData()
        },
        // 删除提示
        async handleDelete(id) {
            const confirmRes = await this.$confirm(
                '此操作将永久删除该数据, 是否继续?',
                '提示',
                {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }
            ).catch(err => { })
            if (confirmRes !== 'confirm') {
                return this.$message.info('已经取消删除')
            }
            this.subDelete(id)
        },
        // 查询信息
        async getData() {
            this.loading = true
            if (this.queryall.pagesize === 0) {
                this.startpage = 1
            }
            if (!this.searchForm.customerName) {
                this.searchForm.customerName = ''
            }

            const res = await this.$http.get(
                `/${this.$ServiceName}/api/external/CustomerItemController/queryAll?startpage=${this.queryall.startpage}&pagesize=${this.queryall.pagesize}&customerName=${this.searchForm.customerName}`
            )

            if (res.status == 200) {
                this.loading = false
                if (res.data.success) {
                    this.customerData = res.data.data.pages
                    // 分页
                    this.queryall.startpage = res.data.data.pageNum // 当前页
                    this.queryall.totalNum = parseInt(res.data.data.totalNum) // 总数量
                    this.queryall.pagesize = res.data.data.pageSize //
                }
            } else {
                this.$message.error('获取数据失败！')
            }
        },
        // 每页显示的条数
        handleSizeChange(val) {
            this.queryall.pagesize = val
            this.getData()
        },
        // 当前页
        handleCurrentChange(val) {
            this.queryall.startpage = val
            this.getData()
        },
        searchData() {
            this.queryall.startpage = 1
            this.getData()
        }
    }
}
</script>
    
<style lang="less" scoped>
/deep/.el-table {
    max-height: none !important;
}

.selectBox {
    justify-content: space-between;
    display: flex;

    background: #ffffff;
    border: 1px solid #e1e4eb;
    border-left: none;

    height: 50px;
    padding-top: 11px;
    padding-left: 14px;
    padding-right: 20px;
}

/deep/ .el-drawer__header {
    margin-bottom: 0;
    padding: 16px;
    border-bottom: 1px solid gainsboro;
}

/deep/ .el-button--primary {
    background-color: #338ce8;
    border-color: #338ce8;
}

.page {
    background: #ffffff;
    border-radius: 4px 4px 0 0;
    padding: 0 1rem;
}

.box {
    background: #ffffff;
    border: 1px solid #e1e4eb;
    border-radius: 4px 4px 0 0;
    border-top: none;
}

.title {
    background: #f5f7fa;
    height: 40px;
    line-height: 40px;

    p {
        font-family: MicrosoftYaHei;
        font-size: 16px;
        color: #303133;
        letter-spacing: 0;
        line-height: 16px;
        padding-left: 14px;
        line-height: 40px;
    }
}

/deep/ .el-table .cell {
    white-space: nowrap;
}

/deep/ .el-form-item--mini .el-form-item__label {
    line-height: 0;
}

/deep/ .el-pagination {
    text-align: right;
    padding: 10px 5px;
}

/deep/ .el-table th>.cell {
    font-family: PingFangSC-Semibold;
    font-size: 14px;
    color: #606266;
}

/deep/ .el-table .el-button:focus,
.el-table .el-button:hover {
    background-color: #fff;
    border: 1px solid #e1e4eb;
}

/deep/ .el-table .el-button--mini {
    color: #1684f6;
    border-color: transparent;
    background: transparent;
}

/deep/ .el-table th {
    border-left: 1px solid #ebeef5;
}

/deep/ .el-table th:nth-child(1) {
    border-left: none;
}

/deep/ .el-table--striped .el-table__body tr.el-table__row--striped td {
    background: #f5f7fa;
}

.right /deep/ .el-button--mini {
    padding: 7px 6px;
}

/deep/.el-pagination.is-background .btn-next,
/deep/ .el-pagination.is-background .btn-prev,
/deep/ .el-pagination.is-background .el-pager li {
    background: #ffffff;
    border: 1px solid #e1e4eb;
    border-radius: 3px;
    border-radius: 3px;
}

/deep/ .el-button+.el-button {
    margin-left: 3px;
}

.asa {
    display: inline;

    /deep/ .el-button--mini,
    .el-button--mini.is-round {
        padding: 7px 6px;
    }
}

.selectBox1 {
    justify-content: space-between;
    display: flex;
    flex-direction: row-reverse;
    background: #ffffff;
    border: 1px solid #e1e4eb;
    border-left: none;
    line-height: 28px;
    height: 37px;
    padding-top: 11px;
    padding-left: 14px;
    padding-right: 20px;
}

.excelBox /deep/ .el-drawer__open .el-drawer.rtl {
    width: 50% !important;
}

/deep/ .el-form-item--mini.el-form-item {
    line-height: 28px;
}

/deep/ .demo-drawer__footer {
    text-align: right;
    padding-right: 1rem;
    border-top: 1px solid #c8cfde;
    background-color: #f5f7fa;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    line-height: 50px;
}
</style>
    